﻿<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en"  lang="en">
<head>
<title></title>     
<meta name="keywords" content="在乎你，张柳我很在乎你">
<meta name="description" content="  这里是个人的表白页面 ">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/dd.css" type="text/css" media="all">
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/content_switch.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/cScroll.js"></script>
    <script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>
    <script src="js/jquery.color.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <script src="js/prettyPhoto.js"></script>
    <link rel="stylesheet" type="text/css" href="css/onepage-scroll.css" />
    <script type="text/javascript" src="js/jquery.onepage-scroll.js"></script> 
</head>
<body>
    <div class="on-door" style="    text-align: center;position: fixed; background: #E6FF86;height: 100%;width:100%;left:0;top:0;z-index:1000;">
        <div style="position: absolute; height: 100px; line-height: 100px;font-size: 26px;margin: auto;left: 0;right: 0;bottom: 0;top: 0;">
            我跟：<input type="text" id="user" style="vertical-align: bottom;margin-bottom: 37px;height: 40px;width: 300px;border-bottom: 1px solid #939090;background: transparent;font-size:16px;">的点滴
        <a class="btn" href="javascript:;">进入</a>
        <p class="tip"></p>
        </div>
    </div>
    <script type="text/javascript">
        $(".btn").click(function() {
            $(".tip").text("");
            var user = $("#user").val();
            if(user === "张柳" || user === "徒弟" || user === "柳柳" || user === "老婆"){
                $(".on-door").fadeOut('200');
            }else {
                $(".tip").text("还没有交集哦");
            }
        })
    </script>
    <div id="abox"></div>
    <div class="page_spinner">
        <div></div>
    </div>
    <div class="over">
        <div class="centre">
            <div class="main">
                <!--header -->
                <header>
                    <h1>
                        <span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span>
                    </h1>
                    <nav class="menu">
                        <ul id="menu">
                            <li id="nav1"><img src="images/nav1.png" alt=""><span>关于心思</span></li>
                            <li id="nav2"><img src="images/nav2.png" alt=""><span>往事刻碑</span></li>
                            <li id="nav3"><img src="images/nav3.png" alt=""><span>一些絮叨</span></li>
                            <li id="nav4"><img src="images/nav4.png" alt=""><span>为你吟诗</span></li>
                            <li id="nav5"><img src="images/nav5.png" alt=""><span>专属相册</span></li>
                            <li id="nav6"><img src="images/nav6.png" alt=""><span>时间沙漏</span></li>
                        </ul>
                    </nav>
                    <img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation">
                    <map name="navigation" class="navigation"></map>
                    <map name="logo" class="map_logo"></map>
                </header>
                <!--header end-->
                <!--content -->
                <map name="back" class="map_back"></map>
                <article id="content">
                    <ul>
                        <li id="page_Home"> <img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
                            <div class="pad">
                                <div class="relative">
                                    <div class="scroll">
                                <h2>关于心思</h2>
                                难过的时候想起你，不开心的都变得不那么重要<br />
                                开心的时候想起你，这世界原来真的很好<br />
                                早上起来没有那么辛苦，可以看到你的：早<br />
                                晚上睡觉，也是在微笑，有你陪伴真好<br />
                                无聊的日子会有那么些不同，因为有你在<br/>   
                            </div></div> 
                            </div>
                        </li>
                        <li id="page_About">
                            <img src="images/bg_content.png" alt="" class="bg_cont">
                            <span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
                            <div class="pad">
                                <h2>往事是刻碑</h2>
                                <div class="relative">
                                    <div class="scroll">
                                        <span>2015/03</span>
                                        <p>初次相识，在炎热的夏午。</p>
                                        <span>2015/07</span>
                                        <p>我的生日，收到了来自你的礼物，你制作的关于我们的页面！</p>
                                        <span>2015/8</span>
                                        <p>送给你的第一份礼物，一个很Q的公仔。</p>
                                        <span>2015/11</span>
                                        <p>这年比往年都冷，选了一条围巾给你。</p>
                                        <span>2016/1</span>
                                        <p>第一次一起看下雪，虽然你在那头，我在这头...</p>
                                        <span>2016/2</span>
                                        <p>你的生日，恰逢新年，怎么我就飞不过去呢？</p>
                                        <span>此刻</span>
                                        <p>祝你节日快乐，开心每一天！</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li id="page_Talk">
                            <img src="images/bg_content.png" alt="" class="bg_cont">
                            <span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
                            <div class="pad">
                                <h2>一些絮叨</h2>
                                <div class="relative">
                                    <div class="scroll">
                                        <div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">好想去旅游，与你。<br/><span style="float: right"> --2016/5/20</span>
                                        </div>
                                        <div style="width:100%;float: left">持续更新<br/><span style="float: right"> --2016/5/*</span></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li id="page_Message">
                            <img src="images/bg_content.png" alt="" class="bg_cont">
                            <span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
                            <div class="pad">
                                <h2>为你吟诗</h2>
                                <div class="relative" style="text-align:center">
                                    <div class="scroll">
                                        离思 <br />
                                        曾经沧海难为水,<br />
                                        除却巫山不是云.<br />
                                        取次花丛懒回顾,<br />
                                        半缘修道半缘君.
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li id="page_Blog">
                            <img src="images/bg_content.png" alt="" class="bg_cont">
                            <span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
                            <div class="pad">
                                <h2>专属相册</h2>
                                <div class="relative">
                                    <div class="scroll">
                                        <ul class="gallery fancybox">
                                            <li style="line-height:120px"><a href="images/uploadimage/img1.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img1.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img1.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img1.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img2.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img2.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img2.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img2.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img3.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img3.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img3.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img3.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img4.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img4.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img4.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img4.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img5.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img5.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img5.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img5.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img6.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img6.jpg" alt=""></a></li>
                                            <li style="line-height:120px"><a href="images/uploadimage/img6.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img6.jpg" alt=""></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li id="page_Time">
                            <img src="images/bg_content.png" alt="" class="bg_cont">
                            <span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span>
                            <div class="pad">
                                <h2>时间沙漏</h2>
                                <div id="loveHeart" style="margin-top: 30px;font-size: 25px;">
                                    <span style="">故事的开始</span>
                                    <div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div>
                                    <img src="images/1.gif" />　　　　
                                    <img src="images/2.gif" /><br/><br/>
                                    <div id="loveu">
                                        这个故事：从2015-3开始！<br/>
                                        <div class="signature" style="float: right; margin-right: 50px;">by  
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>  
                </ul>
            </article>
            <!--content end-->
            </div>
        </div>
<script>
$(window).load(function() { 
    $('.page_spinner').fadeOut();
    $('body').css({overflow:'visible'});    
})
</script>

<script type="text/javascript">//修改时光沙漏时间
    var offsetX = $("#loveHeart").width() / 2;
    var offsetY = $("#loveHeart").height() / 2 - 55;
    var together = new Date();
    together.setFullYear(2015, 03, 01);
    together.setHours(17);
    together.setMinutes(0);
    together.setSeconds(0);
    together.setMilliseconds(0);

    setTimeout(function () {
        adjustWordsPosition();
        startHeartAnimation();
    }, 3000);

    timeElapse(together);
    setInterval(function () {
        timeElapse(together);
    }, 500);

    adjustCodePosition();
    $("#code").typewriter();
</script>
<img src="images/bg_content.png" alt="" class="bg_cont">
</body>
</html>

